<script setup lang="ts">
import router from '@/router'
import {
  useStandard_Parameterstore,
  type _standard,
  type CreateParameter
} from '@/stores/AllYouNeedIsStore'
import { api } from '@/api/api'
import { ref, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessageBox } from 'element-plus'

const route = useRoute()
const standardParameterStore = useStandard_Parameterstore()

function goBack() {
  router.push('/home/processingP')
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

onBeforeMount(() => {
  standardParameterStore.$reset()
  api.getProjectById(parseInt(route.params.id.toString())).then((resp) => {
    for (let i of resp.standards) {
      let x: _standard = {
        id: i.id ?? -1,
        name: i.name,
        parameters: []
      }
      for (let j of i.parameterList) {
        let y: CreateParameter = {
          id: j.id,
          edit: false,
          name: j.name,
          emps: j.emps,
          humanList: j.humanList,
          equipmentList: j.equipmentList,
          sample: j.sample,
          sop: j.sop,
          facilityList: j.facilityList,
          compareValidList: j.compareValidList,
          simulation: j.simulation,
          status: 'Uncompleted',
          labAdmin: j.labAdmin
        }
        x.parameters.push(y)
      }
      standardParameterStore.standards?.push(x)
    }
  })
})

const loading = ref(false)

function submit() {
  let isEditFlag = false
  standardParameterStore.standards.forEach((x) => {
    if (isEditFlag) {
      return
    }
    if (
      x.parameters.find((y) => {
        return y.edit == true
      })
    ) {
      isEditFlag = true
      ElMessageBox.alert('有参数未确认，请将所有参数确认后再提交！', '错误', {
        confirmButtonText: '确认'
      })
      if (isEditFlag) {
        return
      }
    }
  })
  if (!isEditFlag) {
    console.log(standardParameterStore.standards)
    loading.value = true
    api
      .createParameterUnderStandard(standardParameterStore.standards)
      .then((resp) => {
        loading.value = false
        console.log(resp)
        ElMessageBox.alert('创建成功', '成功', {
          confirmButtonText: '确认',
          callback: () => {
            router.push('/home/processingP')
          }
        })
      })
      .catch(() => {
        loading.value = false
        ElMessageBox.alert('创建失败', '错误', {
          confirmButtonText: '确认'
        })
      })
  }
}
</script>

<template>
  <div class="info_main" v-loading="loading">
    <el-container>
      <el-header>
        <div class="sub">
          <el-page-header @back="goBack()">
            <template #content>
              <span class="text-large font-600 mr-3"> 参数分解 </span>
            </template>
          </el-page-header>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside">
          <div class="cs">
            <el-row class="tac">
              <el-col :span="24">
                <el-menu
                  default-active="1"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  :router="true"
                >
                  <el-menu-item
                    v-for="item in standardParameterStore.standards"
                    :index="
                      '/home/createParameter/' +
                      parseInt(route.params.id.toString()) +
                      '/' +
                      item.id
                    "
                    :key="item.id"
                  >
                    <span>{{ item.name }}</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </div>
          <div class="textbox">
            <div class="text">
              <h4>参数列表</h4>
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="submainbox">
            <RouterView />
          </div>
        </el-main>
      </el-container>
      <el-footer><el-button type="primary" @click="submit()">提交</el-button></el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.info_main {
  width: 80%;
  height: 670px;
  border-width: 5px;
  border-radius: 20px;
  margin-top: 30px;
  margin-left: 50px;
  box-shadow: 0px 0px 8px 1px rgb(133, 133, 133);
  padding-top: 10px;
  transition: 1s;
}

.info_main:hover {
  box-shadow: 0px 0px 20px 1px rgb(133, 133, 133);
  transition: 1s;
}

.sub {
  border-style: inset;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  padding-bottom: 10px;
}

.aside {
  position: relative;
  height: 600px;
  margin-top: -10px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-style: groove;
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
}

.cs {
  width: 100%;
}

.tac {
  width: 100%;
}

.textbox {
  position: absolute;
  width: 100%;
  bottom: 5px;
  left: auto;
  right: auto;
}

.text {
  text-align: center;
}

.submainbox {
  margin-left: 30px;
  margin-right: 30px;
  height: 550px;
  overflow-y: auto;
}
</style>
